<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>地图diy实例-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">

    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
</head>

<body>
<div class="weadmin-body">
    <blockquote class="layui-elem-quote">
        特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的
        Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。WeAdmin提示：如需使用或者详细更多案例可以访问官网<a href="http://echarts.baidu.com/"
                                                                                      style="color:red">ECharts</a>。
    </blockquote>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="" style="width: 100%;overflow: hidden;height: 100%; background-color: #f0f0f0;">
        <div id="container" style="width:1200px;height: 600px;margin: 0 auto;"></div>
    </div>
    <blockquote class="layui-elem-quote">
        注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，若要离线使用，请至Echarts官网下载。
    </blockquote>
</div>
<script src="//cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<!--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = null;
    var pao1 = "../../static/images/mapico1.png";
    var pao2 = "../../static/images/mapico2.png";
    var pao3 = "../../static/images/mapico3.png";
    var pao4 = "../../static/images/mapico4.png";

    var geoCoordMap = {
        //"城市":[经度,纬度]
        //此处设置的位置决定气泡和name显示的位置
        "北京": [114.68, 40.66],
        "天津": [117.28, 39.88],
        "河北": [114.08, 38.68],
        "新疆": [86.68, 42.66],
        "江苏": [118.28, 34.06],
        "浙江": [119.28, 29.26],
        "湖北": [112.16, 31.96],
        "江西": [115.36, 28.68],
        "广东": [113.07, 24.27]
    };
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    city: data[i].city,
                    leixing: data[i].leixing,
                    shixiao: data[i].shixiao,
                    fanhuan: data[i].fanhuan
                });
            }
        }
        return res;
    };
    option = {

        backgroundColor: '#f0f0f0',
        tooltip: {

            trigger: 'item',
            triggerOn: 'mousemove',
            alwaysShowContent: true,
            backgroundColor: 'rgba(129,119,255,1)',
            borderColor: 'rgba(92,83,205,1)',
            borderWidth: '2',
            extraCssText: 'padding:10px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
            show: true,

            //formatter: '{a} <br/>{b}<br/> {c}'
            formatter: function (params) {
                var res;
                if (params.value > 0) {
                    res = '注册地区：' + params.data.city + '<br/>';
                    //res +='<img src="'+params.data.icon+'"/>';
                    res += '注册类型：' + params.data.leixing + '<br/>';
                    res += '注册时效：' + params.data.shixiao + '<br/>';
                    res += '税收返还：' + params.data.fanhuan + '<span style="padding:2px 5px;margin-left:5px;background-color:#ff6600;border-radius:3px">最高</span><br/>';
                    //res +=params.data.zixun;
                    res += '<a href="https://www.youfa365.com/" style="color:#fff;padding:3px 20px; text-decoration:none;border:2px #fff solid;margin-top:10px;display:inline-block;border-radius:3px;" target="_blank">立即咨询</a>';
                } else {
                    res = '';
                }

                return res;
            }
        },
        visualMap: [{
            seriesIndex: 0,
            min: 0,
            max: 4,
            calculable: false,
            show: false,
            // 表示 目标系列 的视觉样式。
            target: {
                inRange: {
                    show: true,
                    color: ['#b8b2ff', '#8177ff', '#6056e4', '#4b43ac']
                }
            }
        }],
        geo: {
            map: 'china',
            //为了鼠标滑过气泡时，同样显示tip
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                alwaysShowContent: true,
                backgroundColor: 'rgba(129,119,255,1)',
                borderColor: 'rgba(92,83,205,1)',
                borderWidth: '2',
                extraCssText: 'padding:10px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                show: true,
                formatter: function (params) {
                    var res;
                    res = '注册地区：' + params.data.city + '<br/>';
                    //res +='<img src="'+params.data.icon+'"/>';
                    res += '注册类型：' + params.data.leixing + '<br/>';
                    res += '注册时效：' + params.data.shixiao + '<br/>';
                    res += '税收返还：' + params.data.fanhuan + '<span style="padding:2px 5px;margin-left:5px;background-color:#ff6600;border-radius:3px">最高</span><br/>';
                    res += '<a href="https://www.youfa365.com/" style="color:#fff;padding:3px 20px; text-decoration:none;border:2px #fff solid;margin-top:10px;display:inline-block;border-radius:3px;" target="_blank">立即咨询</a>';
                    return res;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            }
        },
        series: [{
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    //重新设置显示位置，不再使用此处显示文字
                    show: false,
                    color: '#fff',
                    fontSize: 12,
                    formatter: function (params) {
                        var res;
                        if (params.value > 0) {
                            res = params.data.city + '\n';
                        } else {
                            res = '';
                        }
                        return res;
                    }
                },
                emphasis: {
                    show: false,
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(255, 255, 255, 1)'
                },
                emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: convertData([{
                name: '北京',
                city: '北京',
                value: 1,
                leixing: '公司注册（极速版）',
                shixiao: '30天',
                fanhuan: '演示数据'
            },
                {
                    name: '天津',
                    city: '天津',
                    value: 2,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                },
                {
                    name: '河北',
                    city: '河北',
                    value: 1,
                    leixing: '公司注册（极速版）',
                    shixiao: '30天',
                    fanhuan: '演示数据'
                },
                {
                    name: '新疆',
                    city: '新疆',
                    value: 1,
                    leixing: '公司注册（极速版）',
                    shixiao: '30天',
                    fanhuan: '演示数据'
                },
                {
                    name: '江苏',
                    city: '江苏',
                    value: 1,
                    leixing: '公司注册（极速版）',
                    shixiao: '30天',
                    fanhuan: '演示数据'
                },
                {
                    name: '浙江',
                    city: '浙江',
                    value: 2,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                },
                {
                    name: '湖北',
                    city: '武汉',
                    value: 4,
                    leixing: '公司注册（极速版）',
                    shixiao: '1天',
                    fanhuan: '演示数据'
                },
                {
                    name: '江西',
                    city: '江西',
                    value: 3,
                    leixing: '公司注册（极速版）',
                    shixiao: '2天',
                    fanhuan: '演示数据'
                },
                {
                    name: '广东',
                    city: '广东',
                    value: 2,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                }
            ])
        },
            {
                name: 'Point', //30天注册
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData([{
                    name: '北京',
                    city: '北京',
                    value: 1,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                },
                    {
                        name: '河北',
                        city: '河北',
                        value: 1,
                        leixing: '公司注册（极速版）',
                        shixiao: '3天',
                        fanhuan: '演示数据'
                    },
                    {
                        name: '新疆',
                        city: '新疆',
                        value: 1,
                        leixing: '公司注册（极速版）',
                        shixiao: '3天',
                        fanhuan: '演示数据'
                    },
                    {
                        name: '江苏',
                        city: '江苏',
                        value: 1,
                        leixing: '公司注册（极速版）',
                        shixiao: '3天',
                        fanhuan: '演示数据'
                    },
                ]),
                symbol: 'image://' + pao4,
                zlevel: 0,
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: ['50%', '50%'],
                        formatter: function (params) {
                            return params.data.city;
                        }
                    },
                    emphasis: {
                        show: false
                    }
                }

            },
            {
                name: 'Point', //3天注册
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData([{
                    name: '天津',
                    city: '天津',
                    value: 2,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                },
                    {
                        name: '浙江',
                        city: '浙江',
                        value: 2,
                        leixing: '公司注册（极速版）',
                        shixiao: '3天',
                        fanhuan: '演示数据'
                    },
                    {
                        name: '广东',
                        city: '广东',
                        value: 2,
                        leixing: '公司注册（极速版）',
                        shixiao: '3天',
                        fanhuan: '演示数据'
                    }
                ]),
                symbol: 'image://' + pao3,
                zlevel: 1,
                symbolSize: 24,
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: ['30%', '60%'],
                        formatter: function (params) {
                            return params.data.city;
                        }
                    },
                    emphasis: {
                        show: false
                    }
                }
            },
            {
                name: 'Point', //2天注册
                type: 'scatter',
                //formatter: data.value,
                coordinateSystem: 'geo',
                data: convertData([{
                    name: '江西',
                    city: '江西',
                    value: 3,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                }]),
                symbol: 'image://' + pao2,
                zlevel: 1,
                symbolSize: 24,
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: ['10%', '100%'],
                        formatter: function (params) {
                            return params.data.city;
                        }
                    },
                    emphasis: {
                        show: false
                    }
                }
            },

            {
                name: 'Point', //1天注册
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData([{
                    name: '湖北',
                    city: '武汉',
                    value: 4,
                    leixing: '公司注册（极速版）',
                    shixiao: '3天',
                    fanhuan: '演示数据'
                }]),
                symbol: 'image://' + pao1,
                zlevel: 1,
                symbolSize: 24,
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: ['80%', '75%'],
                        formatter: function (params) {
                            return params.data.city;
                        }
                    },
                    emphasis: {
                        show: false
                    }
                }

            }

        ]
    };

    setTimeout(function () {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: 0
        })
    }, 1000);

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>

</html>